<template>
	<view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in navTop"
				:key="index" @tap="tabSelect" :data-id="index">
				{{item.title}}
			</view>
		</scroll-view>
		
		<view class="cssBox">
			<view class="cu-card article no-card">
				<view class="cu-item shadow" v-for="(item, index) in homeList" :key="index" @tap="goReleaseSendDetail(item.id)">
					<view class="content" style="padding: 0;">
						<image :src="item.firstImageUrl" mode="aspectFill"></image>
						<view class="desc">
							
							<view class="flex justify-start">
								<view class="list_title">
									{{ item.petName }}
								</view>
								<view class="list_gender">
									<image v-if="item.petGender === 0" src="../../static/tabbar/man.png" mode="widthFix" style="width: 44rpx;"></image>
									<image v-if="item.petGender === 1" src="../../static/tabbar/women.png" mode="widthFix" style="width: 44rpx;"></image>
								</view>
								<view style="margin-left: 5rpx;margin-top: 1rpx;color: #777777;">
									{{ item.petAge }}
								</view>
							</view>
		
							<view class="list_content">
								{{ item.description }}
							</view>
							<view class="">
								<u-tag style="margin-right: 2rpx;" v-if="item.petNeuter === 0" text="未绝育" mode="dark" type="error" shape="circle" size="mini"/>
								<u-tag style="margin-right: 2rpx;" v-if="item.petNeuter === 1" text="已绝育" mode="dark" type="success" shape="circle" size="mini"/>
								<u-tag style="margin-right: 2rpx;" v-if="item.petVaccine === 0" text="未免疫" mode="dark" type="error" shape="circle" size="mini"/>
								<u-tag style="margin-right: 2rpx;" v-if="item.petVaccine === 1" text="已免疫" mode="dark" type="success" shape="circle" size="mini"/>
								<u-tag style="margin-right: 2rpx;" v-if="item.petInsect === 0" text="未驱虫" mode="dark" type="error" shape="circle" size="mini"/>
								<u-tag style="margin-right: 2rpx;" v-if="item.petInsect === 1" text="已驱虫" mode="dark" type="success" shape="circle" size="mini"/>
							</view>
							<view class="flex justify-between">
								<view class="cu-tag bg-grey light sm round">
									<u-icon name="clock" style="margin-right: 5rpx;"></u-icon>
									{{ item.createDate }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="page-box" v-if="homeList.length < 1">
					<view>
						<view class="centre">
							<image src="https://cdn.zhoukaiwen.com/noData1.png" mode="widthFix"></image>
							<view class="explain">
								暂无数据
								<view class="tips">可以去看看有其他</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="width: 1rpx;height: 150rpx;"></view>
	
	</view>
</template>

<script>
	import {
		getHomeListDetail
	} from '@/api/me/myPetCollectList.js'
	export default {
		data() {
			return {
				requestStatus: false, // 事件防抖
				TabCur: 0,
				scrollLeft: 0,
				newsList: '',
				homeList: [],
				navTop: [{
						id: 1,
						title: '全部',
						petBreed: ''
					},
					{
						id: 2,
						title: '狗狗',
						petBreed: 0
					},
					{
						id: 3,
						title: '猫咪',
						petBreed: 1
					},
					{
						id: 4,
						title: '其他',
						petBreed: 2
					}
				]
			};
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日	 + ' ' + h + ':' + m
				return y + '-' + MM + '-' + d; //年月日时分秒
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				var petBreed = this.navTop[this.TabCur].petBreed;
				getHomeListDetail(petBreed).then(res => {
					if (res.code == 0) {
						this.homeList = res.data
					}
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				setTimeout(() => {
					this.getData();
					this.requestStatus = false;	// 模拟执行完毕，改变 requestStatus
				}, 300);
			},
			goReleaseSendDetail(id) {
				uni.navigateTo({
					url: '/pages/release/release-send-detail?id=' + id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}
	
	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	
		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
	
		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}
	.nav .cu-item.cur {
		font-weight: 600;
	}
	.cssBox {
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}
	
	.list_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}
	
	.list_content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #888;
	}
	
	.page-box {
		margin-top: -150rpx;
	}
</style>
